<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框选择器(input selector)</title>
  <!-- 
  input 伪类选择器用于选择所有 <input> 元素的不同状态，如悬停状态、聚焦状态等。input 伪类选择器的总结： 
 
    1.  input:enabled ：选择可用状态的输入元素。 
    2.  input:disabled ：选择禁用状态的输入元素。 
    3.  input:checked ：选择被选中的复选框或单选框。 
    4.  input:valid ：选择通过验证的输入元素。 
    5.  input:invalid ：选择未通过验证的输入元素。 
    6.  input:focus ：选择当前获取焦点的输入元素。 
    7.  input:hover ：选择鼠标悬停在输入元素上的状态。 

  CSS中的 input 伪元素选择器用于选择 <input> 元素的部分部分样式，例如 ::placeholder 用于设置输入框的占位符样式。input 伪元素选择器的总结： 
 
    1.  ::placeholder ：用于设置输入框的占位符文本的样式。 
    2.  ::selection ：用于设置用户选择文本时的样式。 
    3.  ::value ：用于设置输入框的值的样式。 
    4.  ::first-line ：用于设置元素第一行文本的样式。 
    5.  ::first-letter ：用于设置元素第一个字母的样式。 

  CSS中的 input 属性选择器用于选择具有特定属性的 <input> 元素。input 属性选择器的总结： 
 
    1.  input[type=text] ：选择 type 属性为"text"的 <input> 元素。 
    2.  input[type=password] ：选择 type 属性为"password"的 <input> 元素。 
    3.  input[type=checkbox] ：选择 type 属性为"checkbox"的 <input> 元素。 
    4.  input[type=radio] ：选择 type 属性为"radio"的 <input> 元素。 
    5.  input[type=number] ：选择 type 属性为"number"的 <input> 元素。 
    6.  input[type=email] ：选择 type 属性为"email"的 <input> 元素。 
    7.  input[type=submit] ：选择 type 属性为"submit"的 <input> 元素。 
    8.  input[type=button] ：选择 type 属性为"button"的 <input> 元素。 
   -->
  <style>
    /* pseudo-class selector */
    .pseudo-class:checked + label,
    .pseudo-class:focus {
      color: red;
      font-weight: bold;
    }

    /* pseudo-element selector */
    .pseudo-element::placeholder {
      color: blue;
    }

    /* attribute selector */
    .attribute[type=text] {
      background-color: yellow;
    }

  </style>
</head>
<body>
  
  <h3>input pseudo-class selector</h3>
  <label for="pseudo-class">pseudo-class: </label>
  <input type="text" class="pseudo-class" id="pseudo-class" placeholder="pseudo-class">

  <h3>input pseudo-element selector</h3>
  <label for="pseudo-element">pseudo-element: </label>
  <input type="text" class="pseudo-element" id="pseudo-element" placeholder="pseudo-element">

  <h3>input attribute selector</h3>
  <label for="attribute">attribute: </label>
  <input type="text" class="attribute" id="attribute" placeholder="pseudo-attribute">
  
</body>
</html>